////////////////////////////////////////////////////////
//  this should be able to cycle through the children
//  of a div, in an animation
//

dynoScreen = {

	credit: '2strokeMotor@gmail.com',
	version: 1.3, //onComplete event added 1.2
			//onStart and onKidSwitch
			//add version 1.3
	
	noKidsErr:  'display area must have ZERO children',
	kidDivsErr: 'div to display must have at least ONE child',
	noEventErr: 'no such event\n[onStart|onComplete|onKidSwitch]',

	defaultDuration: 500, //default to half-sec transtion


	initDisplayArea: function(objID,kidDivs,dur){

	
	 // this is where things will be displayed
	 // takes either an obj or gets it from the id string
	 // esto es donde cosas se estaran expuesto 
	 // accepta o un objecto o obtienelo desde la id string
	 if(typeof objID == 'string'){
	  objID = document.getElementById(objID);
	 }

	 // this is the nodelist to loop through
	 // takes either an obj or gets it from the id string
	 // esta es la lista de la node quiere ciclar entre 
	 // accepta o un objecto o obtienela desde la id string
	 if(typeof kidDivs == 'string'){
	  kidDivs = document.getElementById(kidDivs);
	 }

	 // check to make sure things are valid for init

	 if(objID.childNodes.length != 0){
	  alert(dynoScreen.noKidsErr);
	  return false;
	 }else if(kidDivs.childNodes.length == 0){
	  alert(dynoScreen.kidDivsErr);
	  return false;
	 }else{ 

	  ///////////////////////////////////////////////////////////
	  //  alright, you made it!  start doing stuff
	  //
	  ///////////////////////////////////////////////////////////
	  
	  
	  //  array to hold custom events
	  objID.evs = {'onStart':{},'onComplete':{},'onKidSwitch':{}};
	  
	  //  make sure the div has no overflow
	  objID.style.overflow = 'hidden';

	  //  create some useful vars for animation
	  objID.screenHeight  = parseInt(objID.offsetHeight);
	  objID.screenWidth   = parseInt(objID.offsetWidth);
	  objID.screenHeight2 = parseInt(objID.screenHeight/2);
	  objID.screenWidth2  = parseInt(objID.screenWidth/2);
	  objID.isNotAnimating = true;
	  objID.curScreen = 0;
	  objID.duration = (dur >= 0) ? parseInt(dur) : defaultDuration;

	  //  create the two screens for the transition
	  objID.appendChild(document.createElement('div'));
	  objID.appendChild(document.createElement('div'));

	  removeNode = document.createTextNode('screen0');
	  objID.childNodes[0].appendChild(removeNode);
	  removeNode = document.createTextNode('screen1');
	  objID.childNodes[1].appendChild(removeNode);

	  objID.childNodes[0].style.position = 'relative';
	  objID.childNodes[1].style.position = 'relative';

	  objID.childNodes[0].style.top  = '0px';
	  objID.childNodes[1].style.top  = -objID.screenHeight + 'px';

	  objID.childNodes[0].style.left = '0px';
	  objID.childNodes[1].style.left = objID.screenWidth + 'px';

	  objID.childNodes[0].style.height = objID.screenHeight + 'px';
	  objID.childNodes[1].style.height = objID.screenHeight + 'px';

	  objID.childNodes[0].style.width = objID.screenWidth + 'px';
	  objID.childNodes[1].style.width = objID.screenWidth + 'px';

	  // give each screen a child for switching the kidDivs into
	  objID.childNodes[0].appendChild(document.createElement('div'));
	  objID.childNodes[1].appendChild(document.createElement('div'));


	  // create the method to loop through the kidDivs
	  // something in the page script has to call this
	  // 
	  objID.showNext = function(inc,dir){

	   if(this.isNotAnimating){

	    LR = 1, UD = 0;

	    switch (dir){
			case 'up':
				UD = -1; LR = 0;	
				break;
			case 'down':
				UD = 1; LR = 0;
				break;
			case 'left':
				LR = -1;
				break;
	    }

	    this.isNotAnimating = false;
	    this.timeStamp = new Date().getTime();
	    this.cur = (((this.cur+inc)%this.mod)+this.mod)%this.mod;

	    tmpClone = this.kidDivs.children[this.cur].cloneNode(true);

	    curX = this.childNodes[(this.curScreen+1)%2];
	    curX.replaceChild(tmpClone,curX.childNodes[0])

	    var front = this.childNodes[this.curScreen].style;
	    var back  = this.childNodes[(this.curScreen+1)%2].style;

	    //  call onStart functions
	    for(var i in objID.evs.onStart){
	     if(objID.evs.onStart[i])objID.evs.onStart[i].call();
	    }

	    this.moveScreens(LR,UD,front,back);

	   }

	  }

	  // a method for animating the screens into place
	  
	  objID.moveScreens = function(LR,UD,front,back){

	   
	   var tmpDate = new Date();
	   var tmpStamp = tmpDate.getTime();
	   var tmpPercent = ((tmpStamp - this.timeStamp)/this.duration);
	   var left = parseInt(LR * this.screenWidth * tmpPercent);
	   //var top  = parseInt(UD * this.screenWidth * tmpPercent);

	   // let's try to work up some 'easing' kinda motions
	   // to slide the screen some percent over and then back
	   // and then ease into/possibly out of the motion
	   //

	   var tmpStep = (10*tmpPercent) - 7;
	   var xPercent = [-2*tmpStep*tmpStep + 100]/100;
	   var left = parseInt(LR * (this.screenWidth +100) * xPercent);
	   //var top  = parseInt(UD * (this.screenHeight+100) * xPercent);

	   if(tmpPercent < 1){

	    back.left  = left - LR*this.screenWidth  + 'px';
	    front.left = left + 'px';

	    setTimeout(function(){objID.moveScreens(LR,UD,front,back)},0);

	   }else{

	    back.left = '0px';
	    front.left  = LR * -this.screenWidth  + 'px';

	    this.curScreen = (this.curScreen+1)%2;
	    this.isNotAnimating = true;

	    // call the onComplete functions
	    for(var i in objID.evs.onComplete){
	     if(objID.evs.onComplete[i])objID.evs.onComplete[i].call();
	    }

	   }

	   return true;

	  }

	  //  create a method for setting all childNodes
	  //  to loop through
	  //  
	  objID.setKidDivs = function(divID,first){
	   if(this.isNotAnimating){ // don't change while animating

	    if(typeof divID == 'string'){
	     divID = document.getElementById(divID);
	    }
	    this.cur = 0;

	    //checking ONLY if divID.children[first] exists
	    //throws an error 
	    //would be nice to shorten this line
	    if(first && first > 0 && divID.children[first]){
	     this.cur = first;
	    }

	    this.cur -= 1; //ooow, such a HACK
	    this.mod = divID.children.length;
	    this.kidDivs = divID.cloneNode(true);
	    //this.showNext(1);
	    this.showNext(1,'left');

	    //  call onKidSwitch functions
	    for(var i in objID.evs.onKidSwitch){
	     if(objID.evs.onKidSwitch[i])objID.evs.onKidSwitch[i].call();
	    }


	   }
	  }

	  //  then call that method now during init
	  //  to get everything set up
	  //  [why can I not use () at the end of
	  //  the function definition to call it?]
	  //
	  objID.setKidDivs(kidDivs);


	  //  method to return the current child
	  objID.getCurrent = function(){return this.cur; };

	  //  method to set the duration of the animation
	  objID.setDuration = function(val){
	   if(val && val >= 0){
	    this.duration = parseInt(val);
	   }
	  };


	  //  methods to add and remove events from evs
	  objID.addEvent = function (e, func){
		  if(!e || !func || typeof(func)!='function') return;
		  if(!objID.evs[e]) alert(e +' '+ dynoScreen.noEventErr);
		  objID.evs[e][func] = func;
	  }
	  objID.removeEvent = function(e, func){
		  objID.evs[e][func] = '';
	  }

	  
	 }

	}

}

